<template>
	<view class="patrol_style" scroll-y="false">
		<view class="topSearch">
			<u-search placeholder="请输入项目名称" v-model="keyword" :animation="false" :showAction="false" @blur="onBlurSearch" @clear="onClearBtnOK"></u-search>
		</view>
		<view class="dropdown_top">
			<zb-dropdown-menu style="width: 50%">
				<zb-dropdown-item name="项目规模" :options="option" v-model="fication" @change="ficationChange"></zb-dropdown-item>
			</zb-dropdown-menu>
			<zb-dropdown-menu style="width: 50%">
				<zb-dropdown-item name="项目状态" :options="pjStatusOption" v-model="ficationTow" @change="ficationChange"></zb-dropdown-item>
			</zb-dropdown-menu>
			<!-- 	<view v-if="!patrol" @click="patrolChange" class="dropdown_text">开工时间</view>
			<view @click="patrolChange" v-else class="dropdown_left">
				<view>开工时间</view>
				<view>{{ patrol }}</view>
			</view> -->
		</view>

		<scroll-view @scrolltolower="loadMoreData" scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
			<view @click="contentBtnok(item)" class="content_scroll" v-for="(item, index) in isMyPjData" :key="index">
				<view class="content_top">
					<view>
						<image style="width: 50rpx; height: 50rpx" src="../../static/mappages/patrol/xmxx.png" mode=""></image>
						<text style="margin-left: 20rpx">{{ item.pjName }}</text>
					</view>
					<view>
						<text
							:style="{ color: item.pjStatus == '0' ? '#ff2323' : item.pjStatus == '1' ? '#a5a5a5' : item.pjStatus == '2' ? '#5dd536' : '#6ba5ff' }"
							style="margin-right: 20rpx"
						>
							{{ item.pjStatus == '0' ? '未开始' : item.pjStatus == '1' ? '已暂停' : item.pjStatus == '2' ? '进行中' : '已完工' }}
						</text>
					</view>
				</view>
				<view class="content_center">
					<view class="content_centerFlex">
						<view class="formgroup">责任人 :</view>
						<view class="groupholder">{{ item.dutyByName || '- -' }}</view>
					</view>
					<view class="content_centerFlex">
						<view class="formgroup">项目规模 :</view>
						<view class="groupholder">{{ item.pjType == '0' ? '县级' : item.pjType == '1' ? '镇街级' : '- -' }}</view>
					</view>
					<view class="content_centerFlex">
						<view class="formgroup">施工单位 :</view>
						<view class="groupholder">{{ item.constrOrgName }}</view>
					</view>
					<view class="content_centerFlex">
						<view class="formgroup">开工日期 :</view>
						<view class="groupholder">{{ item.startDate }}</view>
					</view>
				</view>
			</view>
			<u-loading-icon style="margin-top: 50rpx" v-if="noticeInfo.isBoolean"></u-loading-icon>
			<uni-load-more v-if="!noticeInfo.isBoolean" status="暂无更多" />
		</scroll-view>
		<!-- 巡查时间 -->
		<u-calendar :show="patrolShow" :mode="patrolMode" @close="patrolShow = false" @confirm="patrolConfirm"></u-calendar>
	</view>
</template>

<script>
import { getMyPj } from '@/api/mappages/project/project.js';
export default {
	components: {},
	data() {
		return {
			keyword: '',
			albumWidth: 0,
			urls1: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg'],
			patrolShow: false,
			patrolMode: 'range',
			patrol: '', //开工时间
			fication: 2, //项目规模
			ficationTow: 4, //项目状态
			option: [
				{
					text: '县级',
					value: 0
				},
				{
					text: '镇街级',
					value: 1
				},
				{
					text: '项目规模(全部)',
					value: 2
				}
			],
			pjStatusOption: [
				{
					text: '未开始',
					value: 0
				},
				{
					text: '已暂停',
					value: 1
				},
				{
					text: '进行中',
					value: 2
				},
				{
					text: '已结束',
					value: 3
				},
				{
					text: '项目状态(全部)',
					value: 4
				}
			],
			isMyPjData: [],
			noticeInfo: {
				page: 1,
				size: 10,
				isBoolean: true
			}
		};
	},
	methods: {
		isNoticeFow() {
			let brr = {
				pjType: this.fication == 2 ? '' : this.fication,
				pjStatus: this.ficationTow == 4 ? '' : this.ficationTow,
				pjName: this.keyword,
				page: this.noticeInfo.page,
				size: this.noticeInfo.size
			};
			getMyPj(brr).then((res) => {
				if (!res.result) return (this.noticeInfo.isBoolean = false);
				if (this.noticeInfo.page > 1 && res.result.total >= this.noticeInfo.size) {
					const previousData = [...this.isMyPjData];
					this.isMyPjData = [...previousData, ...res.result.records];
				} else {
					this.noticeInfo.isBoolean = true;
					this.isMyPjData = res.result.records;
				}

				if (res.result.total === this.isMyPjData.length) {
					this.noticeInfo.isBoolean = false;
				}
			});
		},
		// 触底刷新事件
		loadMoreData() {
			this.noticeInfo.page += 1;
			!this.noticeInfo.isBoolean ? '' : this.isNoticeFow();
			console.log('触底更2112新');
		},
		patrolChange() {
			this.patrol = '';
			this.patrolShow = true;
		},

		// patrolConfirm(e) {
		// 	this.patrol = e[0] + '-' + e[e.length - 1];
		// 	this.patrolShow = false;
		// 	this.createdFun();
		// },
		//河道巡查 点击事件
		contentBtnok(item) {
			console.log(item, '河道巡222查');
			this.$tab.navigateTo(`/mappages/project/information/information?WoID=${item.id}`);
		},
		//整改状态
		ficationChange() {
			this.createdFun();
		},
		onBlurSearch() {
			this.createdFun();
		},
		onClearBtnOK() {
			this.createdFun();
		},
		createdFun() {
			this.isMyPjData = [];
			this.noticeInfo = {
				page: 1,
				size: 10,
				isBoolean: true
			};
			this.isNoticeFow();
		}
	},
	onLoad(options) {
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
		this.isNoticeFow();
	},
	onPullDownRefresh() {
		console.log('下拉刷新');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
};
</script>

<style scoped>
.scrollbox {
	height: calc(100vh - 260rpx);
}
.example-body {
	padding: 12px;
	background-color: #ffffff;
}

.result-box {
	text-align: center;
	padding: 20px 0px;
	font-size: 16px;
}

.patrol_style {
	/* padding: 20rpx; */
	width: 100%;
	overflow-y: hidden;
}

.dropdown_top {
	display: flex;
}

.dropdown_text {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 33.33%;
	box-shadow: 2rpx 2rpx 5rpx rgba(190, 190, 190, 0.5), -2rpx -2rpx 5rpx rgba(255, 255, 255, 0.5);
	z-index: 100;
	font-size: 26rpx;
	color: #323233;
	background-color: #fff;
}

.dropdown_left {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-around;
	width: 33.33%;
	margin-left: 10rpx;
	box-shadow: 2rpx 2rpx 5rpx rgba(190, 190, 190, 0.5), -2rpx -2rpx 5rpx rgba(255, 255, 255, 0.5);
	z-index: 100;
	background-color: #fff;
}

.dropdown_left view:nth-child(1) {
	font-weight: 600;
	font-size: 26rpx;
	color: #323233;
}

.dropdown_left view:nth-child(2) {
	font-size: 22rpx;
}

.content_scroll {
	margin-top: 5rpx;
	width: 100%;
	background-color: #fff;
	padding: 22rpx;
}

.content_top {
	display: flex;
	justify-content: space-between;
}

.content_top view {
	display: flex;
	align-items: center;
}

.content_center {
	display: flex;
	flex-direction: column;
	color: #000;
}
.content_centerFlex {
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #666666;
	height: 50rpx;
}
.formgroup {
}
.groupholder {
	margin-left: 22rpx;
}
.content_button {
	margin: 20rpx 0;
}

.album {
	@include flex;
	align-items: flex-start;

	&__avatar {
		background-color: $u-bg-color;
		padding: 5px;
		border-radius: 3px;
	}

	&__content {
		margin-left: 10px;
		flex: 1;
	}
}

.topSearch {
	/* margin-top: 10rpx; */
	padding: 10rpx;
	background-color: #fff;
}
</style>
